<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header">
</head>
<body class="gray-bg">
<div class="container-div" style="height:50px">
   <div class="row">
      <div class="btn-group-sm" id="toolbar" role="group">
         <a class="btn btn-info" onclick="refresh()" shiro:hasPermission="system:metrics:refresh">
            <i class="fa fa-refresh"></i> 刷新
         </a>
      </div>
       <div class="select-list">
           <ul>
               <li>
                   时间选择：
                   <select id="dateSelected" name="methodType" th:with="type=${@dict.getType('sys_metrics_date')}" onchange="selected()">
                       <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                   </select>
               </li>
           </ul>
       </div>
   </div>
</div>
<div id="container" style="width: 100%"></div>
<div th:include="include :: footer"></div>
</body>
<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
<script>
    // 图表配置
    var options = {
        chart: {
            type: 'spline'
        },
        title: {
            text: ''                 // 标题
        },
        tooltip: {
            xDateFormat: '%Y-%m-%d %H:%M',
            shared: true
        },
        xAxis: {
            crosshair: true,
            type: 'datetime'
        },
        yAxis: {
            title: {
                text: '请求量统计'                // y 轴标题
            },
            crosshair: true
        },
        plotOptions: {
            series: {
                // pointStart: Date.UTC(2012, 0, 1),
                // pointInterval: 24 * 3600 * 1000
            }
        },
        series: [
        //     {                              // 数据列
        //     name: '小明',                        // 数据列名
        //     data: [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]                 // 数据
        // }
        ]
    };

    var prefix = ctx + "system/metrics";
    $(function(){
        refresh(1);
    });

    function selected() {
        var vs = $('#dateSelected option:selected').val();
        refresh(vs)
    }
    function refresh(type) {
        $.ajax({
            //请求方式
            type : "GET",
            //请求地址
            url :prefix+ "/list/"+type,
            //请求成功
            success : function(result) {
                options.series=[];
                var data = result;
                var totalObj={name:'total',data:data.total};
                var successObj={name:'success',data:data.success};
                var errObj={name:'err',data:data.err};
                options.series.push(totalObj);
                options.series.push(successObj);
                options.series.push(errObj);
                options.plotOptions.series.pointStart=data.pointStart;
                options.plotOptions.series.pointInterval=data.pointInterval;
                // 图表初始化函数
                var chart = Highcharts.chart('container', options);
             //   chart.update(options.series)
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                console.log(e.status);
                console.log(e.responseText);
            }
        });
    }
</script>
</html>